<template>
    <div>
        <img src="../assets/background.png" class="bgp">
        <!-- 标题 -->
        <header class="title">
            <p>
                <img src="../assets/icon3-1.png" width="30px">
                LOCAL
                 <div style="width:350px;margin-top:-20px;height:1px;background-color:#fff;overflow:hidden;"></div>
            </p> 
        </header>
        <!-- 左边部分 -->
        <div class="left">
            <p style="font-size:45px">Model Training</p>
            <p style="color: #acacac">You will training your model locally</p>
            <input type="button" value="TRAIN" class="btn bt1" style="margin-left:20%;margin-top:5%">
        </div>
        <!-- 中间部分 -->
        <div class="middle">
            <img src="../assets/pic3-1.png" width="300px" height="105px" >
        </div>
        <!-- 右边部分 -->
        <div class="right">
            <p>Alexnet
                <div style="width:350px;margin-top:-20px;height:1px;background-color:#fff;overflow:hidden;"></div>
            </p>
            <img src="../assets/pic3-2.png" alt="" width="350px" height="150px">
            <div class="rightContent">On ImageNet LSVRC-2010, AlexNet classified 1.2 million high-resolution images with 1000 categories. The top-1 and top-5 error rates on the test set were 37.5% and 17.0% (top-5 error rate: predicting five categories for an image, if only one category was the same as the manual annotation category, it would be wrong. Similarly, top-1 only predicts one category for an image. In the competition of ImageNet LSVRC-2012, the top-5 error rate was 15.3%. AlexNet has 600 million parameters and 650,000 neurons, including five convolution layers, some of which are followed by max-pooling layers and three full connection layers. In order to reduce over-fitting, dropout is used in the full connection layer.</div>
        </div>
        <!-- 底部滚动条 -->
        <div class="bottom">
            <p>The model is training…Please wait.<br/>Training Process : 46%</p>
            <img src="../assets/icon3-2.png" width="40px" style="margin-top:-20px;">
        </div>
    </div>
</template>

<script>
// import 'bootstrap/dist/css/bootstrap.min.css'
 
// import 'bootstrap/dist/js/bootstrap.min.js'

export default {
    data() {
        return {
            
        }
    },
}
</script>

<style scoped>
    .left{
        width: 30%;
        position: absolute;
        left: 20px;
        top: 100px;
        background-color: rgba(0,0,0,0);
    }
    .middle{
        width: 40%;
        position: absolute;
        top: 200px;
        left: 35%;
        background-color: rgba(0,0,0,0);
    }
    .right{
        width: 30%;
        position: absolute;
        top: 50px;
        left: 70%;

    }
    .rightContent{
        font-size: 12px;
        width: 350px;
        height: 200px;
        background-color: rgba(0,0,0,0);
    }

    /* 进度条 */
    .bottom{
        position: absolute;
        left: 35%;
        top: 70%;
        height: 30%;
        background-color: rgba(0,0,0,0);
    }
</style>